<template>
	<div class="add-live-box">
		<el-col :span="20" :xs="24" class="set-live-content">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<div class="container">
						<el-form inline size="small" :model="setLiveFrom" ref="setLiveFrom" :label-position="labelPosition"
							label-width="120px">
							<el-row>
								<div class="form-title">基本信息</div>
								<el-col v-bind="grid">
									<el-form-item label="">
										<div slot="label">
											模式设置
											<el-tooltip class="item" effect="dark" content="提示文字" placement="right-start">
												<i class="el-icon-info"></i>
											</el-tooltip>
											:
										</div>
										<div class="set-modes">
											<div class="modes">
												<span class="mode" v-for="(item,index) in modeList" :key="index"
													:class="modeActive == index ? 'mode-active' : ''" @click="checkMode(index)">
													<i class="iconfont btn-icon" :class="item.icon"></i>{{item.name}}
													<span v-if="modeActive == index" class="mode-active-icon"><i
															class="el-icon-check mode-active-i"></i></span>
												</span>
												<span class="mode mode-example">
													<span class="cursor-btn">查看实例</span>
												</span>
											</div>
											<div class="modes-check">
												<el-radio-group v-model="radio">
													<el-radio :label="3">横屏直播<span class="color-f5">视频比例16:9，适用于企业/PPT宣讲等场景</span></el-radio>
													<br />
													<el-radio :label="6">竖屏直播<span class="color-f5">视频比例9:16，适用于泛娱乐教学、带货等场景</span></el-radio>
												</el-radio-group>
											</div>
										</div>
									</el-form-item>
								</el-col>
								<el-col v-bind="grid">
									<el-form-item label="直播名称：">
										<el-input v-model="setLiveFrom.title" placeholder="请输入直播名称(建议字数在14次以内,不超过45个字)" maxlength="45"
											show-word-limit style="width: 400px;" />
									</el-form-item>
								</el-col>
								<el-col v-bind="grid">
									<el-form-item label="直播简介：">
										<el-input type="textarea" :rows="2" placeholder="请输入直播简介" v-model="setLiveFrom.title"
											maxlength="256" show-word-limit style="width: 400px;" />
									</el-form-item>
								</el-col>
								<el-col v-bind="grid">
									<el-form-item label="开始时间：">
										<el-date-picker v-model="setLiveFrom.title" type="datetime" placeholder="选择开始时间"
											default-time="00:00:00" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" />
									</el-form-item>
								</el-col>
								<el-col v-bind="grid">
									<el-form-item label="结束时间：">
										<el-date-picker v-model="setLiveFrom.title" type="datetime" placeholder="选择结束时间"
											default-time="00:00:00" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" />
									</el-form-item>
								</el-col>
								<el-col v-bind="grid">
									<el-form-item label="直播详情：">
										<Tinymce v-model="setLiveFrom.title"></Tinymce>
									</el-form-item>
								</el-col>
								<el-col v-bind="grid">
									<el-form-item label="讲师设置：">
										<span class="add-lecturer cursor-btn">+&nbsp;&nbsp;&nbsp;添加讲师</span>
										<span class="hint-text">添加用户成为讲师/助教，在直播课程创建完成后可通过微信邀请新讲师</span>
									</el-form-item>
								</el-col>
								<el-col v-bind="grid">
									<el-form-item label="回放设置：">
										<el-switch v-model="setLiveFrom.isReward" active-value="1" inactive-value="0"
											style="width: 50px;"></el-switch>
										<span class="hint-text">开启回放后，直播结束后直播间将播放回放视频</span>
									</el-form-item>
								</el-col>
								<el-col v-bind="grid">
									<el-form-item label="回放有效期：">
										<el-radio-group v-model="radio">
											<el-radio :label="3">永久</el-radio>
											<el-radio :label="6">
												<span>限时</span>
												<el-date-picker v-model="setLiveFrom.title" type="datetime" placeholder="请选择截止日期"
													default-time="00:00:00" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" />
												<span class="hint-text">到期后，学员无法观看回放内容，但仍可进入直播间查看聊天内容及共享文件</span>
											</el-radio>
										</el-radio-group>
									</el-form-item>
								</el-col>
								<el-col v-bind="grid">
									<el-form-item label="倍速播放/快进：">
										<el-radio-group class="modes-check" v-model="radio">
											<el-radio :label="3">
												<span>允许</span>
												<span class="hint-text">用户可以倍速播放与自由拖动进度条</span>
											</el-radio>
											<br />
											<el-radio :label="6">
												<span>禁止</span>
												<span class="hint-text">课程为学完时，禁止倍速播放与自由拖动进度条</span>
											</el-radio>
										</el-radio-group>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<div class="form-title">商品信息</div>
								<el-col v-bind="grid">
									<el-form-item label="售卖方式：">
										<el-checkbox v-model="checked">
											<span>支持单独售卖</span>
											<span class="hint-text">客户可以通过店铺或链接的方式单独购买该商品</span>
										</el-checkbox>
										<div class="set-radio">
											<el-radio-group v-model="radio">
												<el-radio :label="3">免费</el-radio>
												<el-radio :label="6">付费</el-radio>
												<el-radio :label="3">加密</el-radio>
												<el-radio :label="3">指定学员</el-radio>
											</el-radio-group>
											<div>
												<span>有效期</span>
												<el-radio-group v-model="radio">
													<el-radio :label="3">长期有效</el-radio>
												</el-radio-group>
											</div>
										</div>
										<div class="bale-check">
											<span>打包售卖
												<el-tooltip class="item" effect="dark" content="提示文字" placement="right-start">
													<i class="el-icon-info"></i>
												</el-tooltip>
												：
											</span>
											<span class="add-lecturer cursor-btn">+&nbsp;&nbsp;&nbsp;添加打包商品</span>
											<span class="hint-text">用户直接购买此商品时，可同时获得所打包的商品</span>
											<span class="cursor-btn">查看示例</span>
										</div>
										<el-checkbox v-model="checked">
											<span>支持关联售卖</span>
											<span class="hint-text">该商品放入课程中售卖。【注：会员中新增、移除内容时，对于已经购买该会员的用户，需要一定时间更新该用户的权益（一般为10分钟左右）】</span>
										</el-checkbox>
										<div>
											<span class="add-lecturer cursor-btn">+&nbsp;&nbsp;&nbsp;选择课程</span>
										</div>
									</el-form-item>
								</el-col>
								<el-col v-bind="grid">
									<el-form-item label="商品分组：">
										<div class="goods-group">
											<el-select v-model="value" placeholder="请选择">
												<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
												</el-option>
											</el-select>
											<div class="goods-group-btns">
												<span class="cursor-btn">刷新</span>
												<span class="cursor-btn cursor-btn-border">前往商品分组</span>
												<span class="cursor-btn">查看教程</span>
											</div>
										</div>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</div>
				<div style="text-align: right;background-color: #fff;">
					<div style="display: flex;justify-content: space-between;">
						<el-checkbox v-model="checked">
							<span>我已阅读并同意遵守</span>&nbsp;&nbsp;&nbsp;
							<span class="cursor-btn">《小鹅通直播运营规范》</span>
						</el-checkbox>
						<el-button type="primary" @click="submitForm()" v-hasPermi="['admin:live:update']">立即创建</el-button>
					</div>
				</div>
			</el-card>
		</el-col>
	</div>
</template>

<script>
	import Tinymce from '@/components/Tinymce/index'
	export default {
		data() {
			return {
				pickerOptions: this.$timeOptions,
				labelPosition: 'left',
				setLiveFrom: {
					title: '',
					isReward: 0,
				},
				modeList: [{
						name: '视频直播',
						icon: 'icon-shipindianshi'
					},
					{
						name: '录播直播',
						icon: 'icon-shipin'
					},
					{
						name: '语音直播',
						icon: 'icon-huatong'
					},
				],
				modeActive: 0,
				radio: null,
				checked: false,
				money: 0,
				grid: {
					xs: 24,
					sm: 24,
					md: 24,
					lg: 24,
					xl: 18
				},
				options: [{
					value: '商品1',
					label: '商品'
				}, {
					value: '商品2',
					label: '商品'
				}],
				value: ''
			}
		},
		components: {
			Tinymce,
		},
		methods: {
			checkMode(index) {
				this.modeActive = index;
			},
		}
	}
</script>

<style scoped lang="scss">
	.cursor-btn {
		padding: 0 5px;
		color: #3e8fff;
		cursor: pointer;
	}

	.cursor-btn-border {
		padding: 0 7px;
		border-left: 2px solid #3e8fff;
		border-right: 2px solid #3e8fff;
	}

	.color-f5 {
		color: #ccc;
		margin-left: 10px;
	}

	.set-live-content {
		float: right;
	}

	.form-title {
		font-size: 18px;
		color: #606266;
		font-weight: bold;
		margin-bottom: 18px;
		padding-left: 8px;
		line-height: 16px;
		border-left: 5px solid #3e8fff;
	}

	.set-modes .modes {
		display: inline-block;
	}

	.set-modes .modes .mode {
		display: inline-block;
		box-sizing: border-box;
		overflow: hidden;
		position: relative;
		// z-index: 0;
		padding: 20px;
		border-radius: 5px;
		border: 1px solid #ccc;
		margin-right: 15px;
		cursor: pointer;
	}

	.set-modes .modes .mode-active {
		border-color: #3e8fff;
	}

	.set-modes .modes .mode .btn-icon {
		margin-right: 5px;
		font-size: 24px;
		vertical-align: middle;
	}

	.set-modes .modes .mode .mode-active-icon {
		position: absolute;
		top: -7px;
		right: -17px;
		width: 46px;
		height: 26px;
		background-color: #3e8fff;
		text-align: center;
		transform: rotate(45deg);
		box-shadow: 0 1px 1px #ccc;
	}

	.mode-active-i {
		color: #fff;
		font-size: 12px;
		transform: rotate(-45deg);
	}

	.set-modes .modes .mode-example {
		border: none;
	}

	.modes-check>>>.el-radio {
		margin-top: 10px;
	}

	.set-radio {
		padding: 5px;
		background-color: #F5F5F5;
	}

	.goods-group {
		display: flex;
	}

	.goods-group-btns {
		margin-left: 10px;
	}

	.add-lecturer {
		padding: 5px 15px;
		border: 1px dashed #3e8fff;
	}

	.container .hint-text {
		color: #ccc;
	}

	.container .hint-text-detail {
		margin-left: 8px;
	}

	.bale-check {
		padding: 10px 0;
	}
</style>